<template>
	<view>
		<nav-bar title="车辆管理"></nav-bar>
		<view>
			<view class="header-section">
				<view class="header-section-box">
					<!-- <up-subsection activeColor="#FFF" inactiveColor="#797E84" 
					bgColor="#FFF" :list="list" :current="curNow" @change="sectionChange"></up-subsection> -->
					<uni-segmented-control :current="curNow" :values="list" :style-type="styleType"
									:active-color="'#797E84'" @clickItem = "onClickItem" />
				</view>
			</view>
			<!-- @scrolltoupper="scrolltoupper" -->
			<up-list @scrolltolower="scrolltolower" >
				<up-list-item v-for="(item, index) in indexList" :key="item.coid" @click="handleClickItem(item)">
					<uni-section>
						<up-cell-group :customStyle='groupStyle'>
							<view class="units-list">
								<view class="units-list-item">
									<view class="units-list-item-content">
											<view class="units-list-item-content-title">
												{{ item.companyname }}
											</view>
											<view class="units-list-item-content-desc">
												{{item.companymanname}}
											</view>
										</view>
										<view class="units-list-item-content">
											<view class="units-list-item-content-title location">
												<!-- 定位图标和地址横向排列 -->
												<up-icon name="map"></up-icon>
												<text>{{item.companyaddress}}</text>
											</view>
											<view class="units-list-item-content-desc">
												
												<text>{{item.companymantel}}</text>
											</view>
										</view>
									
								</view>
							</view>

						</up-cell-group>
					</uni-section>
				</up-list-item>
				<up-loadmore v-show="noMore" status="nomore" />
			</up-list>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import{getCompanyList} from '@/api/use.js'
import { func } from '../../../uni_modules/uview-plus/libs/function/test';
import { getToken } from '../../../utils/auth';
import NavBar from '@/components/NavBar.vue';
	const indexList = ref([]);
	
	const groupStyle = ref({
		'background-color': '#fff'
	});
	const list = ref(['全部','时间租赁','里程租赁'])
	const curNow = ref(0);  
	const currentPage = ref(1);
	const status = ref('loadmore');  
	// const loadingText = ref('努力加载中...');  
	// const loadmoreText = ref('上拉加载更多');  
	const nomoreText = ref('没有更多了');
	 const noMore = ref(false);
	 function onClickItem(e) {
	 		if (curNow.value !== e.currentIndex) {
	 			curNow.value = e.currentIndex
				currentPage.value = 1
				loadmore()
	 		}
	 	}
	onLoad(() => {
		loadmore();
	});

	const scrolltolower = () => {
		// currentPage.value = 1;
		// loadmore();
		currentPage.value++;
		loadmore()
	};
	const scrolltoupper = ()=>{
		status.value = 'loadmore'
		currentPage.value++;
		loadmore()
		
		
	}
	const loadmore = () => {
		serverCompanyList()
	};

	//  点击列表项
	function handleClickItem(item) {
		console.log(item);
		// 跳转到详情页 并传递列表id
		uni.navigateTo({
			url: '/pages/use/unit/detail/index?id=' + item.coid
		})

	}
	function serverCompanyList(){
		let params = {
			PZ:10,
			PN:currentPage.value,
			type:1,
			status:curNow.value
		}
		getCompanyList(params).then(res => {
			if(res.code === 1){
				if(currentPage.value === 1){
					indexList.value.splice(0);
				}
				// indexList.value = res.data.table;
				res.data.table.forEach(element => {
					indexList.value.push(element);
				});
				if(res.data.table.length<10){
					noMore.value=true
				}else{
					noMore.value=false
				}
			}else{
				noMore.value=false
			}
		})
	}
	// serverCompanyList()
</script>

<style lang="scss" scoped>
	.units-list {
		padding: $uni-spacing-row-lg;

		&-item {
			display: flex;
			flex-direction: column;
			&-row {
				width: 30px;
				height: 30px;
				background-color: #00aaff;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 20px;
			}

			&-content {
				flex: 1;
				display: flex;
				flex-direction: row;
				margin-left: $uni-spacing-row-lg;
				align-items: center;

				&-title {
					font-size: 15px;
					color: #333;
					margin-top:$uni-spacing-row-sm ;
					width: 70%;
				}

				&-desc {
					text-align: right;
					font-size: 13px;
					color: #999;
					width: 30%;
					
				}

				&-tags {
					display: flex;
					flex-wrap: wrap;
					margin-top: $uni-spacing-row-sm;
					font-size: 13px;
					color: #999;

					&-item {
						margin-bottom: $uni-spacing-row-sm;
						margin-right: $uni-spacing-row-lg;
						padding: $uni-spacing-row-sm $uni-spacing-row-lg;
						background-color: #E8EBEE;
						border-radius: 15px;
					}
				}

				&-location {
					display: flex;
					align-items: center;
					font-size: 13px;
					color: #999;
					margin-top: $uni-spacing-row-sm;
				}


			}
		}
	}
	.location{
		display: flex;
		flex-direction: row;
	}
	.header-section{
		width: 100%;
		margin-top: 10px;
		display: flex;
		margin-bottom: 10px;
		justify-content: center;
		&-box{
			width: 80%;
			text-align: center;
		}
	}
	
</style>